<template>
	<div>
		<ul>
			<li v-for="(item,index) in cartData" :key="item.id">
				<span>{{ item.name }}</span>
				<span>{{ item.price }}</span>
				<span>
					<button @click="incr(index)">+++</button>
					<input type="text" v-model="item.num">
					<button @click="decr(index,item.num)">---</button>
				</span>
				<span>小计：{{item.total}}</span>
			</li>
		</ul>
		<Total></Total>
	</div>
</template>

<script>
  import {mapState, mapGetters} from 'vuex'
  import Total from "./Total";

  export default {
    components: {Total},
    // 子组件中得到父组件中把数据写入到vuex中的state数据  从而实现了组件间的通信(传值)
    computed: {
      // ...mapState(['cartData'])
      ...mapGetters(['cartData'])
    },
    methods: {
      // index当前数据对象的索引号
      incr(index) {
        this.$store.dispatch('incr',index)
      },
      decr(index, num) {
        if (num > 1) {
          this.$store.dispatch('decr',index)
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
	ul {
		li {
			width: 900px;
			margin-bottom: 10px;

			span {
				display: inline-block;
				width: 100px;
				text-align: left;
				margin-right: 20px;
			}
		}
	}
</style>
